<template>
  <div class="cartover">
    <div class="bg" v-show="flag">
      <div class="test" @click="none"></div>
      <div class="box">
        <div class="title">
          <div class="left">
            <div class="img">
              <img :src="shoplist.url" alt="" />
            </div>
          </div>
          <div class="right">
            <h1>{{ shoplist.name }}</h1>
            <h4>{{ shoplist.Description }}</h4>
            <p>&yen;{{ shoplist.price }}</p>
          </div>
        </div>
        <div class="con">
          <h2 v-show="shoplist.Version!=null">内存：{{ shoplist.Version }}</h2>
          <p>颜色：{{ shoplist.color }}</p>
          <h2>选择数量</h2>

          <div class="add">
            <img src="../assets/img/sub.png" alt="" @click="sub" />
            <h4>{{ shoplist.num }}</h4>
            <img src="../assets/img/add.png" alt="" @click="add" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["flag", "list"],
  data() {
    return {
      shoplist: null,
    };
  },
  methods: {
    over() {
      this.$emit("over");
    },
    none() {
      this.$emit("none", false);
    },
     add() {
       
      this.shoplist.num +=1
    },
    sub() {
      if (this.shoplist.num <= 1) {
        return;
      } else {
        this.shoplist.num -= 1;
      }
    },
  },
  created() {
    this.shoplist = this.list;
    // console.log(this.shoplist);
  },
};
</script>

<style lang="scss" scoped>
.cartover {
  position: relative;
  .bg {
    position: fixed;
    top: 0px;
    bottom: 40px;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: rgba(51, 51, 51, 0.8);
    .test {
      height: 45%;
      width: 100%;
    }
    .box {
      width: 100%;
      height: 55%;
      background-color: rgb(255, 255, 255);
      position: absolute;
      bottom: 0px;
      z-index: 1000;
      .title {
        width: 100%;
        display: flex;
        margin: 0 auto;
        padding: 0px 10px;
        box-shadow: 0 5px 13px rgb(0 0 0 / 12%);
        background: #f7f7f7;
        .left {
          position: relative;
          top: -50px;
          img {
            width: 100px;
            height: 100px;
            background-color: rgba(247, 247, 247);
            border-radius: 10px;
            padding: 10px;
            border: 1px solid rgb(214, 211, 211);
          }
        }
        .right {
          padding-left: 20px;
          padding-top: 20px;
          h1 {
            color: #333;
            font-weight: 700;
            font-size: 16px;
          }
          h4 {
            color: #7f7f7f;
            font-size: 12px;
            padding: 10px 0;
          }
          p {
            color: #d44d44;
          }
        }
      }
      .con {
        width: 90%;
        margin: 0 auto;

        h2 {
          color: rgb(34, 34, 34);
          padding-left: 5px;
          padding-bottom: 10px;
          padding-top: 30px;
          font-size: 14px;
          font-weight: 700;
        }
        .add {
          display: flex;
          width: 80px;
        //   margin: 10px 0;
          h4 {
            width: 10px;
            height: 20px;
           text-align: center;
            color: #292828;
            line-height: 20px;
            text-align: center;
          }
          img {
            display: block;
            width: 20px;
            height: 20px;
          }
        }
        // p{
        //     color: rgb(34, 34, 34);
        //     padding: 10px 5px;
        //     width: 30%;
        //     border: 1px solid #d0d1d3;
        //      font-weight: 700;
        //      font-size: 13px;
        // }
        h4 {
          color: #666;
        //   padding-left: 20px;
        padding: 0px 10px;
        }
      }
    }
  }
}
</style>